<template>
	<view>
		<image class="bgImage" src="/static/image/guide/homeBg.png" mode="widthFix"></image>
		<view class="navBox">
			<p v-for="(item,index) in list1" :class="tabCurrent == index?'selectTab':''" @click="changeTab(index)"
				:key="index">{{item.name}}</p>
			<p class="lineBlock" :style="{transform:`translateX(${transform}rpx)`}"></p>
		</view>
		<swiper class="swiper-box" @transition="swiper1Transition" @animationfinish="swiper1Animationfinish"
			:current="tabCurrent">
			<swiper-item class="swiper1">
				<z-paging-swiper>
					<template #top>
						<z-tabs :bar-style="{background:'RGBA(72, 225, 108, 0.8)',
				borderRadius: '26rpx',width:' 74rpx',
				height: '12rpx',marginTop:'-20rpx'}" :active-style="{color:'#fff',fontWeight:'bold'}" bg-color="transparent"
							ref="tabs" :list="tabList" :current="tabs2Current" @change="tabsChange"
							inactive-color="#938E91" />
					</template>
					<swiper class="swiper" :current="swiperCurrent" @transition.stop="swiperTransition"
						@animationfinish.stop="swiperAnimationfinish">
						<swiper-item class="swiper-item" v-for="(item,index) in datalist" :key="index">
							<z-paging @onRefresh="onRefresh" refresher-theme-style="white" :ref="`paging${index}`"
								:show-refresher-update-time="true" :auto="false" @query="queryList"
								v-model="datalist[index].list">
								<view class="listBox" v-if="datalist[index]">
									<view class="listItem" v-for="(val,id) in datalist[index].list" @click="goRoute('/packageA/pages/webView/webView',val)"
										:key="id">
										<image :src="val.image" lazy-load mode=""></image>
										<p>{{val.name}}</p>
										<view class="date">
											<p>
												<image lazy-load src="http://cdn.yic3.cn/lawyer/mp-xhs/contract/icon12.png"
													mode=""></image>
												<text>{{val.issueTime}}</text>
											</p>
											<p>
												<image src="http://cdn.yic3.cn/lawyer/mp-xhs/contract/icon11.png"
													mode=""></image>
												<text>{{val.viewNum}}</text>
											</p>
										</view>
									</view>
								</view>
							</z-paging>
						</swiper-item>
					</swiper>
				</z-paging-swiper>
			</swiper-item>
			<swiper-item class="swiper2">
				<z-paging ref="contractPaging" :show-refresher-update-time="true" v-model="contractList"
					@query="queryContract" refresher-theme-style="white" :auto="false">
					<view class="contractList">
						<view class="listItem" v-for="(item,index) in contractList" :key="index"
							@click="goRoute('/packageA/pages/contractCatalogue/contractCatalogue',item)">
							<view class="itemTop">
								<p>{{item.name}}</p>
								<p>
									<image src="http://cdn.yic3.cn/lawyer/mp-xhs/contract/icon1.png" mode=""></image>
									<text>{{item.viewNum}}</text>
								</p>
							</view>
							<p class="itemText">{{item.describe}}</p>
						</view>
					</view>
				</z-paging>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				contractList: [],
				list1: [{
					name: '社区',
				}, {
					name: '合同',
				}],
				tabList: [],
				lineBg: 'http://cdn.yic3.cn/lawyer/mp-xhs/mine/bgIcon.png',
				transform: 0,
				tabCurrent: 0,
				swiperCurrent: 0,
				tabs2Current: 0,
				datalist: []
			};
		},
		onLoad() {
			this.getArticleType()
		},
		onReady() {
			this.$refs.contractPaging.reload()
		},
		methods: {
			// 第一个tabs
			changeTab(e) {
				this.tabCurrent = e
				this.transform = e * 148
			},
			// 第二个tabs
			tabsChange(e) {
				console.log(e)
				this.swiperCurrent = e
				this.tabs2Current = e
				if (!this.datalist[e].list.length) {
					this.$refs[`paging${this.tabs2Current}`][0].reload()
				}
			},
			// 刷新
			onRefresh() {

			},
		
			swiper1Animationfinish(e) {
				if (e.detail.current == this.tabCurrent) return false
				this.tabCurrent = e.detail.current;
				this.transform = this.tabCurrent * 148
				this.$refs.tabs.unlockDx();
			},
			swiper1Transition(e) {
				// console.log(e.detail.dx)
			},
			swiperAnimationfinish(e) {
				if (e.detail.current == this.tabs2Current) return false
				this.tabs2Current = e.detail.current;
				if (!this.datalist[this.tabs2Current].list.length) {
					this.$refs[`paging${this.tabs2Current}`][0].reload()
				}
			},
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// 获取文章类型
			getArticleType() {
				 uni.showLoading()
				this.$api.getArticleType().then(res => {
					console.log(res)
					 uni.hideLoading()
					if (res.data.code == 0) {
						this.tabList = res.data.data
						this.tabList.forEach(item => {
							this.datalist.push({
								page: 1,
								list: [],
								loading: false
							})
						})
						let timer =  setTimeout(() => {
							this.$refs[`paging${this.tabs2Current}`][0].reload()
							timer = null
						}, 10)
					}
				})
			},
			// 获取文章列表
			queryList(page, size) {
				if(page == 1) uni.showLoading()
				this.$api.getArticle({
					page,
					size: 10,
					typeId: this.tabList[this.tabs2Current].id
				}).then(res => {
					if(page == 1) uni.hideLoading()
					console.log(res.data.data.items)
					this.$refs[`paging${this.tabs2Current}`][0].complete(res.data.data.items)
				})
			},
			// 获取合同
			queryContract(page, size) {
				this.$api.getContractType({
					page,
					size,
					typeId: 1
				}).then(res => {
					this.$refs.contractPaging.complete(res.data.data.items)
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	@import 'service.scss'
</style>